<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<div th:insert="~{common/common::common}"/>
<head>
    <meta charset="UTF-8">
    <title>最近一小时广告点击量实时统计</title>
</head>
<body>
<div th:replace="~{common/leftnavbar::leftnav}"></div>
<div class="layui-body" style="padding-left:50px;padding-top: 50px">
    <p style="text-align: center;font-size: 200%"><b>一小时内点击量实时统计</b></p>
    <div id="chart_box" style="width: 1350px;height:800px;margin:0 auto;"></div>
</div>
</body>

<script th:inline="javascript">
    var dom = document.getElementById("chart_box");
    var myChart = echarts.init(dom);

    mychart1();

    function mychart1() {
        axios.get('/acc_data', {
        })
            .then(function (res) {
                // console.log("----------------------------------");
                console.log("res:" + res.data.idSet);
                console.log("res:" + res.data.timeInterval);
                option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: res.data.idSet
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            magicType: { show: true, type: ['stack', 'tiled'] },
                            saveAsImage: { show: true }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: res.data.timeInterval
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: res.data.seriesDTOS
                };
                myChart.setOption(option, true);
            })
            .catch(function (error) {
                console.log(error);
            });
    }

    //mychart1();

    function accessfunc() {
        if (document.getElementById("access").getAttribute("class")=="layui-nav-item layui-nav-itemed"){
            document.getElementById("access").setAttribute("class", "layui-nav-item");
        } else {
            document.getElementById("access").setAttribute("class", "layui-nav-item layui-nav-itemed");
        }
    }
    function categoryfunc() {
        if (document.getElementById("category").getAttribute("class")=="layui-nav-item layui-nav-itemed"){
            document.getElementById("category").setAttribute("class", "layui-nav-item");
        } else {
            document.getElementById("category").setAttribute("class", "layui-nav-item layui-nav-itemed");
        }
    }
</script>


</html>